<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>添加分类</title>
		<!-- Bootstrap -->
		<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-theme.min.css">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/Validform_v5.3.2/css/style.css"/>
		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<!-- header -->
		<header></header>
		<div class="main">
			<div class="left-side"></div>
			<div class="right-content">
				<!-- 表格 -->
				<div class="panel panel-primary">
					<div class="panel-heading">添加分类</div>
					<div class="panel-body">
						<!-- 表单 -->
						<form class="form-horizontal" action="/category/add" method="post">
							<div class="form-group">
								<label for="" class="col-sm-2 control-label">
									分类名称
									<span class="text-danger">*</span>
								</label>
								<div class="col-sm-10">
									<input type="text" name="name" class="form-control" placeholder="请输入分类名称" datatype="*" errormsg="分类名称至少一位">
								</div>
							</div>
							<div class="form-group">
								<label for="" class="col-sm-2 control-label">
									父级分类
									<span class="text-danger">*</span>
								</label>
								<div class="col-sm-10">
									<select id="parent" name="parent_id" class="form-control">
										<option value="0">无</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10">
									<button type="submit" id="addBtn" class="btn btn-primary">添加分类</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="lib/jQuery/jquery-1.12.4.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="lib/bootstrap/js/bootstrap.min.js"></script>
		<script src="js/load.js"></script>
		<script src="lib/Validform_v5.3.2/Validform_v5.3.2_min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//获取一级分类
			$.getJSON('/category/sub', {
				id: 0
			}, function(res) {
				if (res.status) {
					res.data.forEach(function(item, index) {
						var $option = $(`<option value="${item.id}">${item.name}</option>`);
						$('#parent').append($option);
					})
				}
			})
		</script>
		<script type="text/javascript">
			$("form").Validform({
				tiptype: 4,
				ajaxPost: true,
				callback: function(res) {
					if (res.status) {
						// $('#editModal').modal('hide');
						layer.msg(res.msg);
						// loadList();
					} else {
						layer.msg(res.msg);
					}
				}
			})
		</script>
	</body>

</html>
